参考连接https://segmentfault.com/a/1190000006178770

 

一.环境

1.node.js v8.4.0 

2.新建项目及文件夹结构

webpack-hello3

  app //项目程序文件夹

    images //图片文件夹

    index.tmpl.html //项目启动界面模板,依据该模板生成正真的项目启动页面index.html

    main.js //项目的唯一入口程序,也是启动程序

       build //存放编译(打包)后的文件夹

  

 

3. npm init      //在改文件夹下运行 (生成一个包管理文件package.json)

4. npm install --save-dev webpack //安装webpack

5.package.json文件中配置命令

{

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack", //运行打包 (npm start 或 npm run start )
    "server": "webpack-dev-server --open" //运行本地服务 (npm run server ,在浏览器中运行项目)
  },

}

 npm的start命令是一个特殊的脚本名称,其特殊性表现在,在命令行中使用npm start就可以执行其对于的命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}npm run build

其中 打包和编译的区别,打包是安装打包配置把js进行打包输出,编译是安装编译配置把ts等代码文件编译成.js文件,或对代码进行压缩,优化等。

 

 

二.配置文件及运行本地服务

1.在webpack-hello3文件夹根目录下新建webpack.config.js文件

2.编辑配置文件

module.exports = {
  
  entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
  
  output: {
    path: __dirname + "/build",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
 
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  },
 
 
}
 
关于打包成多个js文件的配置
    /*
    * 这样配置所有的js文件都会打包在一个bundle.js文件中
    * 此时 index.html引用
    * <script src="bundle.js"></script>
    entry:__dirname+"/app/main.js", //程序唯一入口文件,
    output:{
        path:__dirname+"/public",//打包后文件存放的地方
        filename:"bundle.js"//打包后输出文件的文件名
    },
     
    */


    /*
    * 要把各js文件分多个文件打包时,需要这样配置
    * 此时 index.html引用
    * <script src="main.js"></script>
    * <script src="gr.js"></script>
    */
    entry:{
        main:__dirname+"/app/main.js", //main 表示程序唯一入口文件
        gr:[__dirname+"/app/Greeter.js"] //这个可以把多个js文件合并成一个gr.js
    },
    output:{
        path:__dirname+"/public",//打包后文件存放的地方
        filename:"[name].js" //这样会分别生成main.js和 gr.js 两个文件
    },

 

 
三.Babel
Babel其实是一个编译JavaScript的平台,它可以编译代码帮你达到以下目的:
  • 让你能使用最新的JavaScript代码(ES6,ES7...),而不用管新标准是否被当前使用的浏览器完全支持(如 import {} from './main.js') ;
  • 让你能使用基于JavaScript进行了拓展的语言,比如React的JSX;
// npm一次性安装多个依赖模块,模块之间用空格隔开 ,
//babel-core babel核心包,babel-preset-env 解析Es6,babel-preset-react解析React的JSX

1.安装babel
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

2.配置babel
  {
    test: /(\.jsx|\.js)$/,
    use: {
      loader: "babel-loader",
      options: {
        presets: [
          "env", "react"
        ]
      }
    },
    exclude: /node_modules/
  },
 
四.安装react
npm install --save react react-dom
 
五.css
css-loader使你能够使用类似@import和 url(...)的方法实现 require()的功能
style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
1.安装
npm install --save-dev style-loader css-loader
2.配置
{
      test: /\.css$/,
      use: [
              {
                   loader: "style-loader"
              }, {
                    loader: "css-loader",
                    options: {
                        modules: true
                    }
              }
       ]
}



六.图片
引用形式
1.html文件中直接引用,如:<img src="a.jpg" />
 2.css中,如:.body{background:url(a.jpg)}
3.js中,如:var img = '<img src="a.jpg" />'; document.body.innerHTML = img;
4.ReactJS中,如:render(){
          return (<img src="a.jpg" />);
         }
 
webpack中引入图片需要url-loader 这个加载器,而url-loader又依赖file-loader,
而html中的img标签需要html-withimg-loader插件支持,所以需要安装它们,
npm install --save-dev file-loader url-loader html-withimg-loader
 
 增加配置
{
  test:/\.(png|jpg|gif)$/,
  use:{
    loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
    /*
    loader:"url-loader",
    options:{
      limit:50,//图片打包限制,当图片小于50字节时自动转换成base64编码引用,大于50字节时打包
      outputPath:'images/' //将打包后图片放到指定文件夹
    }*/
  }
},
{
  test:/\.html$/, //解析直接写在html文件中<img>标签
  use:{
    loader:'html-withimg-loader'
  }
}
 
 
七.简单优化
 1.分离第三方库,如react
 2.分离js,css(既css单独打包,因为webpack默认会把js,css打包到一个文件)
3.压缩js代码
 
 安装css单独打包插件
npm -save-dev extract-text-webpack-plugin
 
更改css配置
{
  test: /\.css$/,
  use:ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: {
      loader:"css-loader",
      options:{
        modules:true,//指定启用css modules
        localIdentName:'[name]__[local]--[hash:base64:5]' //指定css类名格式
      }
    }
  })
},
 
 
plugins:[
  //分离第三方库,要放在前面
  new webpack.optimize.CommonsChunkPlugin({name:"vendor",filename:"vendor.bundle.js"}),
  new HtmlWebpackPlugin({
    template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
  }),
  new webpack.optimize.OccurrenceOrderPlugin(),//根据模块调用次数,给模块分配ids,常被调用的ids分配更短的id,使得ids可预测,降低文件大小,该模块推荐使用
  new webpack.optimize.UglifyJsPlugin(),//压缩js
  new ExtractTextPlugin("style.css")//分离css
]
 
 



 

posted on 2018-02-02 15:25  滴水冰寒  阅读(167)  评论(0编辑  收藏  举报