webpack学习记录

Posted 2020-08-07

1、最近没事做就学习了一下webpack，因为之前有接触过seajs和requirejs但是他们都没打包和webpack那么强大

　　WebPack的特点

1. 丰富的插件，方便进行开发工作
2. 大量的加载器，包括加载各种静态资源
3. 代码分割，提供按需加载的能力
4. 发布工具

 

那我们直接进入正题：

　　因为webpack是基于nodejs的，所以本地要安装下nodejs  npm 安装那两个我就不多说啦，网上教程一大堆。

　　WebPack的安装

1. 安装命令

   $ npm install webpack -g

2. 使用webpack

   $ npm init  # 会自动生成一个package.json文件
   $ npm install webpack --save-dev #将webpack增加到package.json文件中

　　3、然后新建目录

　　　　根目录下，新建一个webpack.config.js文件 就像gulp gulpfile.js一样的意思、

　　　　新建一个index.css文件  一个index.js文件 然后安装所需的模块。。。比如css-loader style-loader、、、、

　　　　webpack.config.js文件的内容

　　　　var webpack = require(‘webpack‘);

　　　　var commonsPlugin = new webpack.optimize.CommonsChunkPlugin(‘common.js‘);
　　module.exports = {
    　　//插件项
   　　 plugins: [commonsPlugin],
   　　 //页面入口文件配置
   　　 entry: {
     　　   index : ‘./src/js/page/index.js‘
   　　 },
   　　 //入口文件输出配置
    　　output: {
     　　   path: ‘dist/js/page‘,
      　　  filename: ‘[name].js‘
   　　 },
   　　 module: {
       　　 //加载器配置
        loaders: [
     　　       { test: /\.css$/, loader: ‘style-loader!css-loader‘ },
           　　 { test: /\.js$/, loader: ‘jsx-loader?harmony‘ },
         　　　　   { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},
          　　  { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘}
        ]
    },
    //其它解决方案配置
    resolve: {
        root: ‘E:/github/flux-example/src‘, //绝对路径
        extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘],
        alias: {
            AppStore : ‘js/stores/AppStores.js‘,
            ActionType : ‘js/actions/ActionType.js‘,
            AppAction : ‘js/actions/AppAction.js‘
        }
    }
};
index.js文件　　
 require(‘./index.css‘)
弄完这些之后一定要 用命令行执行 webpack