webpack
webpack可以看作是模块的打包机，把浏览器不认识的语言（scss,jsx,vue）打包成浏览器认识的语言。
具体代码可以在我个人的github上下载
https://gitee.com/new_yangjie/webpack
比如说在module文件中moduleA.js中写入这样一段代码先导出的时候用commonJs导出因为用es6的话需要下载babl-loder
在src下的main.js中进行引入
var moduleA = require("./module/moduleA")
console.log(moduleA)
console.log(88888888)
理论上在src下的index.html直接通过script标签引入，会在控制台上打印出moduleA导出的对象。但是这是不可以的因为浏览器不识别这些代码所以我们要借助webpack来完成模块化的打包，把他打包成浏览器识别的代码。
那么webpack到底怎么使用呢?
npm init // 先进行初始化生成package.json文件
cnpm下载webpack和webpack脚手架
cnpm install --save webpack webpack-cli
为了方便启动我们可以在package.json文件中进行script脚本的配置让其启动起来方便
意思是通过开发者模式进行打包，这样打包出来的代码未进行压缩
–watch是实时监听的意思通过修改main.js或者moduleA.js文件控制台也会变但是要手动刷新
webpack --mode development
意思是通过生产者模式打包，这样打包出来的代码会进行压缩
webpack --mode production
这个意思通过webpack-dev-serve会自动生成一个服务器 会进行热重载
但是还需要在vue.config.js中配置一些东西
“start”: “webpack-dev-server --mode development”,
这样通过npm run dev进行打包你肯定会失败 为什么呢？
因为入口文件不能为main.js默认不进行配置的话是index.js
你可以把main.js改成index.js这样通过npm run dev也可以完成打包。打包成功后会生成一个dist文件，里面的main.js就是打包好的文件。这样你在src文件下的index.html中引入dis里面的js一定是可以用的
那么怎么进行更改入口和出口配置呢？
我们需要在package.json同级下创建一个webpack.config,js文件进行配置
路径必须是绝对路径加_dirname
意思是生成的文件名字是上面入口前面的名字比如这样就会打包生成一个kerweinmain.js
filename:"[name].js",
这样我们通过npm run dev 也可以进行打包
webpack-dev-serve
上面其实提到过就是这里
“start”: “webpack-dev-server --mode development”,
那么怎么让浏览器进行热重载呢和可以在服务器访问端口号运行呢？
下载
cnpm install --save webpack-dev-server
在webpack.config.js中进行配置
在这里需要注意必须要在出口中加上因为devserve有一个坑就是不会生成dist文件所以我们需要创建一个虚拟路径可以访问到我们生成的文件
publicPath:"/dist/" //虚拟的路径可以访问到 我们的生成文件
devsever中也可以配置一些反向代理的东西
是否开启热重载
inline:true
这样就完成了
只需npm start就可以启动了
通过localhost:8080/index.html访问
sorcce-map
映射源代码方便调试
代码出来错误我们可以直观的找到
loaders配置
module: {
rules: [
// loader 规则
{
test: /\.css$/,
// loader: 'style-loader!css-loader' //添加对样式表的处理,内联样式
loader: 'style-loader!css-loader!postcss-loader'
},
{
test: /\.scss$/,
// loader: 'style-loader!css-loader!sass-loader' //添加对样式表的处理,内联样式
loader: 'style-loader!css-loader!postcss-loader!sass-loader'
},
{
test: /\.js$/, //随便起的test 名字
exclude: /node_modules/, //排除一个
// exclude: /(node_modules|src)/, //*****排除多个怎么写？？？
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{ test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
]
},
//插件
plugins: [
new VueLoaderPlugin()
]
}
这里简单总结一下
(1) vue-loader ( vue-loader vue-template-compiler )
需要创建配置插件
//插件
plugins: [
new VueLoaderPlugin()
]
(2) babel-loader ( ES6 => ES5 ,react) (babel-loader@7 babel-core
babel-presetes2015)
(3) css-loader,style-loader (将css 文件当成模块处理)
(4) sass-loader(scss 编译生成css文件) (安装node-sass)
(5) file-loader , url-loader (文件 copy 到目标文件夹)
(url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于
file-loader，
而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少
请求次
数。)
(6) post-css (处理css兼容) (postcss-loader autoprefixer postcss)
需要创建postcss.config.js进行配置
module.exports = {
plugins: [
require('autoprefixer')('last 100 versions' )
// require('autoprefixer')(
// { browsers:
// [
// 'last 10 Chrome versions',
// 'last 5 Firefox versions',
// 'Safari >= 6',
// 'ie> 8',
// 'iOS >= 8',
// 'Android >= 4.4'
// ]
// }
// )
]
}