【study】三分钟入门webpack

1. Webpack基础介绍

• $\color{red}{Webpack可以看做是模块打包机}$：

• (1)它做的事情是，分析你的项目结构，找到JavaScript模块(commonJs)以及其它的一些浏览器
  
• (2)不能直接运行的拓展语言（Scss，jsx,.vue等），并将其打包为合适的格式以供浏览器使用。

2. webpack的基本配置项讲解

• (1)npm install webpack webpack‐cli ‐‐save‐dev
• (2)package.json
• $\color{red}{开发环境与生产环境}$
• webpack ‐‐mode development(开发环境中) ‐‐watch
• webpack ‐‐mode production (生产环境)
• (3) 默认入口src/index.js
       出口 dist/main.js

3. 入口与出口及单页面与多页面

• webpack.config.js

//入口
entry: {
index:__dirname + "/src/index.js",
index2:__dirname + "/src/index2.js"
},//可以多个入口
//出口
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "[name].bundle.js",//打包后输出文件的文件名
publicPath:"/dist/" //webpack output is served from
}

4. webpack-dev-server

• npm install ‐‐save‐dev webpack‐dev‐server

devServer: {
 contentBase: "./", //content not from webpack is serverd
 port: '8088',
inline: true//实时刷新
 },

• webpack‐dev‐server ‐‐mode development
  (并不会生成dist 文件)

5.source-map 映射源代码， 方便调试

devtool: 'source‐map'

6. loaders配置

• (1) vue-loader ( vue-loader vue-template-compiler )

npm install vue-loader vue-template-compiler

• （2）配置vue-loader规则

module:{
   rules:[
       {test:/\.vue$/,use:'vue-loader'}//处理.vue文件的loader
   ]
}

• （3）在webpack.config.js文件中配置vue-loader插件

const {VueLoaderPlugin} = require('vue-loader')

 module.exports = {
        ...
        plugins:[
            ...
            new VueLoaderPlugin()
        ]
 }

• （4） babel-loader ( ES6 => ES5 ,react) (babel-loader@7 babel-core babel-presetes2015)
• （5） css-loader,style-loader (将css 文件当成模块处理)
• （6） sass-loader(scss 编译生成css文件) (安装node-sass)
• （7） file-loader , url-loader (文件 copy 到目标文件夹)
• （8） (url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数。)
• （9） post-css (处理css兼容) (postcss-loader autoprefixer postcss)

7. webpack.config.js 配置文件参考

 module.exports ={
 entry: {
 index:__dirname + "/src/index.js"
},
 output: {
 path: __dirname + "/dist", //打包后的文件存放的地方
 filename: "[name].bundle.js",//打包后输出文件的文件名
 publicPath:"/dist/" //webpack output is served from
 },

 devServer: {
 contentBase: "./", //content not from webpack is serverd
 port: '8080',
 inline: true//实时刷新
 },

 devtool: 'source‐map',

 module:{
 rules:[
 {
 test: /\.css$/,
 loader: 'style‐loader!css‐loader'//添加对样式表的处理,内联样式
 //loader: 'style‐loader!css‐loader!postcss‐loader'
 },
 {
 test:/\.js$/, //随便起的test 名字
 exclude: /node_modules/, //排除一个
 // exclude: /(node_modules|src)/, //*****排除多个怎么写？？？
 loader:'babel‐loader',
 query:{
 presets:['es2015']
 }
 },

 //npm install ‐‐save‐dev sass‐loader
 //因为sass‐loader依赖于node‐sass，所以还要安装node‐sass
 // npm install ‐‐save‐dev node‐sass
 {
 test: /\.scss$/,
 loader:'style‐loader!css‐loader!sass‐loader'
 //loader:'style‐loader!css‐loader!postcss‐loader!sass‐loader'
 },
 {
 test: /\.(png|jpg|gif|svg)$/,
 loader: 'file‐loader',
 options: {
 name: 'img/[name].[ext]'
 }
 //(1)将代码中依赖的图片资源复制到目标文件夹img/文件夹下面
 //(2)自动更新静态url地址(根据publicPath)。
 }
 ]
}
 }

8.postcss.config.js 配置文件(处理css兼容)

 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'
 ]
 }
 )
 ]
 }