webpack 學習

·1.https://www.2cto.com/kf/201711/696035.html

2. http://blog.csdn.net/x550392236/article/details/78426883

3.https://www.cnblogs.com/mrszhou/p/7868800.html

4.https://www.cnblogs.com/Leo_wl/p/4862714.html

 

① 全局安裝webpack  

npm install webpack -g

安裝webpack-cli

npm install  webpack-cli -g

②定位到根目錄

cd ----

②//安裝到項目目錄

npm install --save-dev webpack

npm install  webpack-cli -g

③使用npm init命令能夠自動建立這個package.json文件

npm init

輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，做者等信息 回車默認

④咱們在本項目中安裝Webpack做爲依賴包

建立兩個文件夾,app文件夾和public文件夾，app文件夾用來存放原始數據和咱們將寫的JavaScript模塊，public文件夾用來存放以後供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個文件）。接下來咱們再建立三個文件:npm install --save-dev webpack
⑤index.html

• index.html --放在public文件夾中;
• Greeter.js-- 放在app文件夾中;
• main.js-- 放在app文件夾中;

⑥index.html 放入

<div id='root'> </div> <script src="bundle.js"></script>

// Greeter.js

module.exports = function() { var greet = document.createElement('div'); greet.textContent = "Hi there and greetings!"; return greet; };

 

//main.js 

const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

⑦ 建立webpack.config.js 放入

module.exports = {
devtool: 'eval-source-map',//生成source map 易於調試
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
devServer: {
contentBase: "./public", //本地服務器所加載的頁面所在的目錄
historyApiFallback: true, //不跳轉
inline: true, //實時刷新
port: "8028" //端口 默認是8080
}
}

注：對小到中型的項目中，eval-source-map是一個很好的選項

 

　　⑧ 建立本地服務器 能夠實時監聽項目改變 運行

npm install --save-dev webpack-dev-server

⑨在webpack.config.js 變爲

module.exports = {
	devtool: 'eval-source-map',
	entry: __dirname + "/app/main.js",
	output: {
		path: __dirname + "/public",
		filename: "bundle.js"
	},
	devServer: {
		contentBase: "./public", //本地服務器所加載的頁面所在的目錄
		historyApiFallback: true, //不跳轉
		inline: true, //實時刷新
		port: "8028" //端口  默認是8080
	}
}

　　⑩在package.json中的scripts對象中添加以下命令，用以開啓本地服務器：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"//
  },

　　

⑩②

在終端中輸入 npm run server 便可自動打開瀏覽器查看到運行的結果

 

二。

Babel的安裝與配置

Babel實際上是一個編譯JavaScript的平臺，它能夠編譯代碼幫你達到如下目的：

• 讓你能使用最新的JavaScript代碼（ES6，ES7...），而不用管新標準是否被當前使用的瀏覽器徹底支持；
• 讓你能使用基於JavaScript進行了拓展的語言，好比React的JSX；

Babel的安裝與配置

Babel實際上是幾個模塊化的包，其核心功能位於稱爲babel-core的npm包中，webpack能夠把其不一樣的包整合在一塊兒使用，對於每個你須要的功能或拓展，你都須要安裝單獨的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。

咱們先來一次性安裝這些依賴包

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

　　在webpack中配置Babel的方法以下【添加】:

module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }

三。es6 語法使用

a.js

const animal = function Animal() {
	this.say = function(anything) {
		if(typeof anything != "undefined") {
			return "動物說：" + anything;
		}
	}
};

const name = "ES6 動物啊";
export {
	name,
	animal
};

　　b.js

import {
	name,
	animal
} from './Animal';
let monkey = new animal();
document.querySelector("#showES6").innerHTML = "ES6 import 內容：" + name + "===" + monkey.say("AA");

　附：

//所有導入
import people from './example'

//有一種特殊狀況，即容許你將整個模塊看成單一對象進行導入
//該模塊的全部導出都會做爲對象的屬性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//導入部分
import {name, age} from './example'

// 導出默認, 有且只有一個默認
export default App

// 部分導出
export class App extend Component {};


1.當用export default people導出時，就用 import people 導入（不帶大括號）

2.一個文件裏，有且只能有一個export default。但能夠有多個export。

3.當用export name 時，就用import { name }導入（記得帶上大括號）

4.當一個文件裏，既有一個export default people, 又有多個export name 或者 export age時，導入就用 import people, { name, age } 

5.當一個文件裏出現n多個 export 導出不少模塊，導入時除了一個一個導入，也能夠用import * as example

　　

四。css  scs

安裝【必定先按照style-loader  再安裝 css-loader】

npm install --save-dev style-loader css-loader

　繼續安裝

npm install --save-dev postcss-loader autoprefixer

　　 安裝node-sass 須要先安裝python

npm install --save-dev node-sass

npm install --save-dev sass-loader

在 webpack.config,js 中添加

{
			test: /\.(scss|css)$/,
			use: [{
				loader: "style-loader"
			}, {
				loader: "css-loader"
			}, { //scss 變量【】
				loader: 'postcss-loader',
				options: {
					plugins: [
						require('autoprefixer')({
							browsers: ['last 10 versions']
						})
					]
				}
			}, {
				loader: "sass-loader"
			}]
		}

建立 一個index.scss  

引入

//引入sass
import "./index.scss";

　　

題外：

爲何咱們要作三份 Webpack 配置文件

https://zhuanlan.zhihu.com/p/29161762

引入bootstrap:

https://blog.csdn.net/wild46cat/article/details/77662555

 

npm install bootstrap --save-dev

 

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

 

引入jquery npm install jquery@2.1.4 --save--dev

①：在配置問價中添加（webpack.config.js）

var webpack = require("webpack");

②module.exports 中添加

plugins: [
		new webpack.ProvidePlugin({
			$: "jquery",
			jQuery: "jquery",
			"window.jQuery": "jquery"
		})
	]

　啦啦啦啦：

vue-cli 構建項目

https://blog.csdn.net/hongchh/article/details/55113751