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作为依赖包

npm install --save-dev webpack
⑤创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个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

1. import 'bootstrap/dist/css/bootstrap.min.css'
2. 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